<ui:composition xmlns="http://www.w3.org/1999/xhtml"
                xmlns:ui="http://java.sun.com/jsf/facelets"
                template="/WEB-INF/facelets/template.xhtml"
                xmlns:h="http://java.sun.com/jsf/html"
                xmlns:p="http://primefaces.prime.com.tr/ui"                 
                xmlns:f="http://java.sun.com/jsf/core">

<ui:param name="title" value="#{msg.loginTitle}"/>
<ui:define name="headerBar">
    <div id="logindiv">
        <h:form>
            <h:outputLabel for="username" value="#{msg.usernameLabel}"/>
            <h:inputText id="username" value="#{loginControllerBean.user.username}"/>
            <h:outputLabel for="password" value="#{msg.psswrdLabel}"/>
            <h:inputSecret id="password" value="#{loginControllerBean.user.password}"/>
            <h:commandButton value="#{msg.loginButton}" action="#{loginControllerBean.login}" />
        </h:form>            
    </div>
</ui:define>

<ui:define name="pageContents">
    
    <h:body>
        
        <div id="registerdiv">
            <h:form id="registerForm">
                <h:panelGrid columns="3">
                    <h:outputLabel for="username" value="#{msg.usernameLabel}"/>
                    <h:inputText id="username" value="#{loginControllerBean.user.username}"                        
                                 required="true" requiredMessage="#{msg.usernameCantBeEmpty}">
                            <f:validateLength minimum="1" />
                            <f:ajax event="blur" render="usernameMsg" />
                    </h:inputText>
                    <p:message id="usernameMsg" for="username" display="text"/>
                    
                    <h:outputLabel for="password" value="#{msg.psswrdLabel}"/>
                    <h:inputSecret id="password" value="#{loginControllerBean.passwordOne}"
                        required="true" requiredMessage="#{msg.passwordCantBeEmpty}">
                        <f:ajax event="blur" render="passwordMsg" />
                    </h:inputSecret>
                    <p:message id="passwordMsg" for="password" display="text"/>
                    
                    <h:outputLabel for="password2" value="#{msg.verifyPsswrdLabel}"/>
                    <h:inputSecret id="password2" value="#{loginControllerBean.passwordTwo}"
                         required="true" requiredMessage="#{msg.passwordCantBeEmpty}">
                        <f:ajax event="blur" render="passwordMsg2" />
                    </h:inputSecret>
                    <p:message id="passwordMsg2" for="password2" display="text"/>

                    <h:outputLabel for="email" value="#{msg.emailLabel}"/>
                    <h:inputText id="email" value="#{loginControllerBean.user.email}"
                            required="true" requiredMessage="#{msg.emailCantBeEmpty}">
                            <f:validateLength minimum="3" />
                            <f:ajax event="blur" render="emailMsg" />
                    </h:inputText>
                    <p:message id="emailMsg" for="email" display="text"/>
                    <p/>
                    <h:commandButton value="#{msg.registerButton}" action="#{loginControllerBean.register}" />
                    <p/>
                </h:panelGrid>
            </h:form>  
        </div>
      
    </h:body>

</ui:define>

<ui:param name="h1" value="#{msg.loginHeader}"/>    

</ui:composition>